import 'package:flutter/material.dart';

class DraggableListPage extends StatefulWidget {
  const DraggableListPage({super.key});

  @override
  State<DraggableListPage> createState() => _DraggableListPageState();
}

class _DraggableListPageState extends State<DraggableListPage> {
  // 左侧列表的数据（可拖拽排序）
  List<String> leftList = ['项目1', '项目2', '项目3', '项目4', '项目5'];

  // 右侧列表的数据（不可排序）
  List<String> rightList = ['项目A', '项目B', '项目C', '项目D'];

  // 记录每个项目的数量状态
  Map<String, int> itemCounts = {};

  @override
  void initState() {
    super.initState();
    // 初始化所有项目的数量为0
    for (var item in leftList) {
      itemCounts[item] = 0;
    }
    for (var item in rightList) {
      itemCounts[item] = 0;
    }
  }

  // 增加项目数量
  void _incrementCount(String item) {
    setState(() {
      itemCounts[item] = (itemCounts[item] ?? 0) + 1;
    });
  }

  // 减少项目数量
  void _decrementCount(String item) {
    if ((itemCounts[item] ?? 0) > 0) {
      setState(() {
        itemCounts[item] = (itemCounts[item] ?? 0) - 1;
      });
    }
  }

  // 将项目从左侧移动到右侧
  void _moveToLeft(String item) {
    setState(() {
      leftList.add(item);
      rightList.remove(item);
    });
  }

  // 将项目从右侧移动到左侧
  void _moveToRight(String item) {
    setState(() {
      rightList.add(item);
      leftList.remove(item);
    });
  }

  // 拖拽完成时重新排序
  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = leftList.removeAt(oldIndex);
      leftList.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 左侧的可拖拽列表（网格布局样式）
          Expanded(
            flex: 1,
            child: Column(
              children: [
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text('已启用', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: ReorderableListView(
                      onReorder: _onReorder,
                      padding: EdgeInsets.zero,
                      children: [
                        for (int index = 0; index < leftList.length; index++)
                          SizedBox(
                            key: ValueKey(leftList[index]),
                            child: _buildLeftListItem(leftList[index], index),
                          ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

          const Divider(height: 1),

          // 右侧的普通列表（只显示+号）
          Expanded(
            flex: 1,
            child: Column(
              children: [
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text('未启用', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: GridView.builder(
                      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 200, // 每个item最大宽度100
                        mainAxisSpacing: 10, // 垂直间距
                        crossAxisSpacing: 10, // 水平间距
                        childAspectRatio: 1, // 宽高比 = width/height = 100/40 = 2.5
                      ),
                      itemCount: rightList.length,
                      itemBuilder: (context, index) {
                        return _buildRightListItem(rightList[index], index);
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建左侧列表项（只显示-号）
  Widget _buildLeftListItem(String item, int index) {
    return Container(
      margin: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: Colors.red.withOpacity(0.2),
            spreadRadius: 1,
            blurRadius: 3,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // const Icon(Icons.drag_handle, color: Colors.grey),
          Text(item, style: const TextStyle(fontSize: 16)),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                onPressed: () {
                  _moveToRight(item); // 点击-号将项目移动到右侧
                },
                icon: const Icon(Icons.remove_circle_outline, color: Colors.red),
                iconSize: 20,
                padding: EdgeInsets.zero,
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 构建右侧列表项（只显示+号）
  Widget _buildRightListItem(String item, int index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 1,
            blurRadius: 3,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(item, style: const TextStyle(fontSize: 16)),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('${itemCounts[item] ?? 0}', style: const TextStyle(fontSize: 16)),
              IconButton(
                onPressed: () {
                  _moveToLeft(item); // 点击+号将项目移动到左侧
                },
                icon: const Icon(Icons.add_circle_outline, color: Colors.green),
                iconSize: 20,
                padding: EdgeInsets.zero,
              ),
            ],
          ),
        ],
      ),
    );
  }
}
